<template>
  <!-- 行业动态 -->
  <view class="industryDynamic">
    <view class="wrapper-content">
      <view class="wrapper-screen" @click="showPopup = true">
        <text :class="!focusGroupsName ? 'defaultText' : 'seleText'">
          {{ !focusGroupsName ? "全部行业" : focusGroupsName }}
        </text>
        <image
          :src="
            !focusGroupsName
              ? baseImgUrl + 'screen1.png'
              : baseImgUrl + 'screen2.png'
          "
        ></image>
      </view>

      <scroll-view
        scroll-y="true"
        @scrolltolower="scrollBottom"
        :style="[
          {
            height: !loading && !noMore ? '92vh' : '100%',
          },
        ]"
        v-if="dataSource.length"
      >
        <view
          class="allList"
          v-for="(item, index) in dataSource"
          :key="index"
          :data-url="`/guideInfo/workList/workDetail?id=${item.id}&noticeType=3&index=3`"
          @click="handleClickRouter"
        >
          <view class="lt">
            <text class="line-hidden lt-classify">
              {{ item.informationName }}
            </text>
            <image
              :src="
                item.coverUrlDesc
                  ? imgPrefix + item.coverUrlDesc
                  : baseImgUrl + 'regulations.png'
              "
            >
            </image>
          </view>
          <view class="rt" style="padding-left: 18rpx">
            <view class="line2-hidden title">{{ item.title }}</view>
            <view class="footer"> 发布时间：{{ item.createTime }} </view>
          </view>
        </view>
        <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
      </scroll-view>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          text="暂无内容！"
          :icon="baseImgUrl + 'no-icon2.png'"
        >
        </u-empty>
      </view>
    </view>

    <!-- 筛选弹出层 -->
    <u-popup
      :show="showPopup"
      mode="top"
      :closeOnClickOverlay="false"
      @close="closePopup"
    >
      <view class="popup-view">
        <view class="person-label">
          <view class="label-name"> 选择行业 </view>

          <view class="person-options">
            <view
              v-for="item in perList"
              :key="item.text"
              :class="item.disabled ? 'activeOpt' : ''"
              class="person-optionsItem"
              @click="perListHandle(item)"
            >
              {{ item.text }}
            </view>
            <view
              class="person-optionsItem hidden"
              v-if="perList.length % 3"
            ></view>
          </view>

          <view class="btns">
            <button class="reset-btn lt" type="primary" @click="closePopup">
              取消
            </button>
            <button class="submit-btn" type="primary" @click="popupSubmit">
              确定
            </button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { pageIndustry } from "@/api/home.js";
import { messageList } from "@/api/messages.js";
import mixin from "@/utils/mixin.js";
import { handleClickRouter } from "@/utils/util.js";

export default {
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      imgPrefix: uni.getStorageSync("imgPrefix"),
      focusGroupsName: "", //筛选选中值的  名字
      focusGroups: "", //筛选选中的值
      showPopup: false,
      perList: [],

      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onShow() {
    this.dataSource = [];
    this.pageConfig.pageNo = 1;
    this.getList();
    this.classify();
  },
  methods: {
    handleClickRouter,
    closePopup() {
      this.showPopup = false;
    },
    popupSubmit() {
      let list = [];
      this.perList.filter((v) => {
        if (v.disabled == true && v.value != "notval") {
          list.push(v);
        }
      });

      if (list.length) {
        this.focusGroupsName = list[0].text;
        this.focusGroups = list[0].value;
      } else {
        this.focusGroupsName = "";
        this.focusGroups = "";
      }

      this.pageConfig.pageNo = 1;
      this.pageConfig.pageSize = 10;
      this.dataSource = [];
      this.getList();
      this.showPopup = false;
    },
    perListHandle(item) {
      if (item.value == "notval") {
        for (var v of this.perList) {
          v.value == "notval" ? (v.disabled = true) : (v.disabled = false);
        }
        return false;
      }

      this.perList.map((v) => {
        if (v.text == item.text && v.value != "notval") {
          v.disabled = true;
        } else {
          v.disabled = false;
        }
      });
    },
    scrollBottom() {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    getList() {
      let data = {
        noticeType: 3,
        industryInformationId: this.focusGroups,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      messageList(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
    classify() {
      pageIndustry().then((res) => {
        this.perList = res.result || [];
        if (res.result.length) {
          this.perList = res.result.map((v) => ({
            text: v.informationName,
            value: v.id,
            disabled: false,
          }));

          this.perList.unshift({
            text: "全部",
            value: "notval",
            disabled: true,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scope>
.industryDynamic {
  height: 100%;
  .wrapper-content {
    background: #f9f9f9;
    height: 100%;
    padding: 0rpx 20rpx 24rpx;

    .wrapper-screen {
      margin-bottom: 20rpx;
      padding-bottom: 15rpx;
      background: #fff;

      image {
        width: 24rpx;
        height: 13rpx;
        vertical-align: middle;
      }

      .defaultText {
        display: inline-block;
        margin: 0 10rpx;
        color: #9f9fa0;
      }

      .seleText {
        display: inline-block;
        margin: 0 10rpx;
        color: #2488f5;
      }
    }

    .lt-classify {
      position: absolute;
      display: inline-block;
      padding: 1px 5px;
      max-width: 160rpx;
      color: #fff;
      font-size: 24rpx;
      background: #2488f5;
      border-radius: 4rpx;
    }

    .rt {
      .title {
        height: auto;
      }
    }
  }

  .popup-view {
    padding: 20rpx 35rpx;

    .person-label {
      margin-top: 2vh;

      .label-name {
        color: #bbbbbb;
        font-size: 28rpx;
        font-weight: 500;
      }

      .person-options {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 2vh;
        max-height: 50vh;
        overflow-y: auto;
        font-size: 26rpx;

        .person-optionsItem {
          margin-bottom: 30rpx;
          border-radius: 4rpx;
          height: 56rpx;
          width: 200rpx;
          color: #333333;
          text-align: center;
          line-height: 56rpx;
          background: #f6f6f6;
        }

        .activeOpt {
          color: #2488f5;
          background: #d8ebff;
        }

        .hidden {
          visibility: hidden;
        }
      }
    }

    .btns {
      display: flex;
      justify-content: space-between;
      padding-top: 30rpx;
      button {
        width: 50%;
        border-radius: 16rpx;
      }
      .lt {
        margin-right: 20rpx;
      }
    }
  }
}
</style>
